<template>
	<view class="container">
		<view class="container">
			<!-- 顶部面板 -->
			<view class='slide box-c d-ai-c'>
				<view class="red-background">
				</view>
				<view class="card">
					<!-- 标题 -->
					<view class="box">
						<image :src="shopInfo.shopLogo" class="ml-4 shop-logo" style="" mode=""></image>
						<text class="shop-title" style="">{{shopInfo.shopName}}</text>
						<view class="phone-view">
							<view class="iconfont icondianhua phone" @tap="call">

							</view>
						</view>

					</view>
					<view class="box link">

					</view>
					<view class="box mt-1">
						<text class="iconfont icontime1 icon"></text>
						<text class="desc">
							{{shopInfo.workTime}}
						</text>

					</view>
					<view class="box">
						<text class="iconfont icondingwei icon"></text>
						<text class="desc">
							{{shopInfo.city}} {{shopInfo.district}} {{shopInfo.address}}
						</text>
						<text class="iconfont iconqianjin">
						</text>

					</view>
				</view>
			<!-- 	<view class="box d-jc-sb attract d-ai-c ">
					<text class="m-1">该商家有2个志愿者岗位招募</text>
					<text class="m-1" @tap='look'>点击查看</text>
				</view> -->

			</view>
			<!-- 滚动区域 -->
			<view class="scroll-panel" id="scroll-panel">
				<view class="list-box">
					<view class="left">
						<scroll-view scroll-y="true" :style="{ 'height':scrollHeight + 'px' }"
							:scroll-into-view="leftIntoView">
							<view class="item" v-for="(item,index) in list" :key="index"
								:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
								@tap="leftTap">{{item.classifyName}}</view>
						</scroll-view>
					</view>
					<view class="main">
						<scroll-view scroll-y="true" :style="{ 'height':scrollHeight + 'px' }" @scroll="mainScroll"
							:scroll-into-view="scrollInto" scroll-with-animation="true">
							<view class="item main-item box-c" v-for="(item,index) in list" :key="index"
								:id="'item-'+index" >
								<view class="title-class">
									<view>{{item.classifyName}}</view>
								</view>
								<view class="goods box d-jc-c d-ai-c"  v-for="(data,index2) in item.data" :key="index2">
									<image :src="data.logo" mode=""></image>
									<view class="box-c d-flex d-jc-sb">
										<view class="mb-3">
											<text class="class-title">{{data.name}}</text>
										</view>
										<view class="box d-ac-sb">
											<view class="price">
												<text class="">{{data.price}}积分</text>
											</view>
											<view class="peopel-num box d-ai-c">
												<text class="iconfont iconminus-opp animated flipInX" @tap="addSubtractProduct(-1,data,index)" v-show="data.number>0"></text>
												<text class="animated flipInX" v-show="data.number>0">{{data.number}}</text>
												<text class="iconfont iconjia1"  @tap="addSubtractProduct(+1,data,index)"></text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="fill-last" :style="{ 'height':fillHeight + 'px' }"></view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="popo animated box-c" :class=sty id="box" v-if="popUpFlag" style="animation-duration: 300ms">
				<view class="box d-jc-sb title1">
					<view class="">
						<text>已选商品</text>
					</view>
					<view class="clear-cart">
						<text class="iconfont iconshanchu">
						</text>
						<text @tap='clearCart'>
							清空购物车
						</text>
			
					</view>
			
				</view>
				<view class="">
					<scroll-view scroll-y style="min-height: 150rpx;max-height: 700rpx;" class="">
						<view class="product-list" v-if='item.number>0' v-for="(item,index) in popUpList">
							<view class="box d-jc-sb">
								<view class="box">
									<view class="product-logo">
										<image :src="item.goodsLogo" mode=""></image>
									</view>
									<view class="box-c d-jc-sb product-name">
										<text>{{item.goodsName}}</text>
										<text>{{(item.goodsPrice)*(item.number)}}积分</text>
									</view>
			
								</view>
								<view class="box d-ai-end " >
									<view class="box d-ai-c operation">
										<text class="iconfont iconminus-opp" @tap="addSubtractProduct(-1,item,index)"></text>
										<text>{{item.number}}</text>
										<text class="iconfont iconjia1" @tap="addSubtractProduct(+1,item,index)"></text>
									</view>
									
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			
			
			</view>
			<view class="box-c d-ac-c bottom2" v-show="buttomFlag">
				<view class="bottom box d-flex animated fadeInUp">
					<view class="flex-1 bottom-list1 box">
						<image :src="cartActive ? cartActiveImage: cartImage" @tap="open(cartActive)" mode=""></image>
						<text v-if="cartActive">{{totalNumber}}</text>
					</view>
					<view class="flex-4 box-c bottom-list2">
						<text>￥{{totalPrice}}</text>
						<text :class="!cartActive ? 'mini-price' :''">另需配送费用￥0</text>
					</view>
					<view class="flex-2  box d-jc-c d-ai-c" :class="cartActive ? 'bottom-list3' :'' "
						@tap="affirmOrder(cartActive,shopInfo.shopId)">
						<text :class="!cartActive ? 'mini-price' :''">
							提交订单
						</text>
					</view>
				</view>
			</view>
		</view>
		    <view :class="popUpFlag?'cpt-mask':''" @tap='closeMask'>  
		        </view>  
			<wybpopup ref="popup1" type='bottom'>
				<view class="popup">
					<view class="pop-t">
						<image class="pop_images1" src="../../static/images/shoplist/guanbi@2x.png" mode="" @tap="close1()"></image>
						<view>选择支付方式</view>
					</view>
					<view class="pop-c">
						<text>￥</text>
						<text>{{totalPrice}}</text>
					</view>
					<radio-group @change="radioChange">
						<label class="uni-lab" v-for="(item, index) in items" :key="item.value">
							<view class="">
								<image v-if="item.value==='1'" class="pop_images2" src="../../static/images/shoplist/jfzf@2x.png" mode=""></image>
								<image v-if="item.value==='2'" class="pop_images2" src="../../static/images/shoplist/wxzf@2x.png" mode=""></image>
								<view class="pop-name">
									<text>{{item.name}}</text>
									<text v-if="item.value==='1'">(剩余{{userInfo.userInfo.accumulatePoints}}积分)</text>
								</view>
							</view>
							<view>
								<radio :value="item.value" :checked="index === current" />
							</view>
						</label>
					</radio-group>
					<button class="payment" type="default" @tap='payment1()'>
						立即支付
					</button>
			
			
				</view>
			
			</wybpopup>
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import wybpopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			wybpopup
		},
		data() {
			return {
				items: [{
						value: '1',
						name: '积分支付'
					},
					{
						value: '2',
						name: '微信支付',
						checked: 'true'
					}
				
				],
				current: 0,
				flag: true,
				loading: true,
				scrollHeight: 0,
				scrollTopSize: 0,
				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
				leftArray: [],
				mainArray: [],
				topArr: [],
				leftIndex: 0,
				scrollInto: '',
				windows_height: '',
				num: 1,
				element: [],
				activeIndex: 0,
				shopId: '',
				shopInfo: {},
				list: [],
				cartActive: false, // 购物激活状态
				cartActiveImage: '../../static/images/cart/cart_active.png',
				cartImage: '../../static/images/cart/cart.png',
				buttomFlag: true, //底部购物车导航栏.
				totalPrice:0, //商品总价格
				totalNumber:0 ,//商品总数量
				cartList: '',
				popUpFlag: false,
				sty: "fadeInUp",
				popUpList: '',
				classifyId:''
			}
		},
		computed: {
			...mapState(['loginState', 'userInfo']),
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex > 3 ? (this.leftIndex-3):0}`;
			}
		},

		onLoad(option) {
			console.log(option.classifyId)
			this.shopId = option.shopId
			this.classifyId = option.classifyId
		
		},
		mounted() {
			/* 等待DOM挂载完成 */
			this.$nextTick(() => {
				/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
				setTimeout(() => {
					/* 等待滚动区域初始化完成 */
					this.initScrollView().then(() => {
						/* 获取列表数据，你的代码从此处开始 */
						this.getListData();
					})
				}, 100);
			})

		},
		onReady() {
		},
		onShow() {
			this.getUserInfo()
			this.getShopInfo()
			this.getProductList()
		},
		methods: {
			...mapMutations(['logout', 'setUserInfo']),
			// 获取用户信息
			getUserInfo() {
				
				console.log(this.loginState)
				console.log(this.userInfo)
				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}
			
				})
			
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			open1() {
				// this.$refs.popup.open('bottom')
				this.$refs.popup1.show()
			},
			close1() {
				// this.$refs.popup.close()
				this.$refs.popup1.hide()
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.shopInfo.phone //仅为示例
				});
			},
			openInfo(data){
				uni.navigateTo({
					url:'product-activity-info?id='+data.id
				})
			},
			look() {
				uni.showToast({
					title: '功能暂未开放！',
					duration: 1500,
					icon: "none"
				});
			},
			async getProductList(){
				await this.$api.getProductList({
					shopId: this.shopId,
					// shopId:4
				}).then((res) => {
					this.list = res.data.data
					console.log("==========="+this.list)
					this.getListData();
					this.calculate()
					
				})
			},
			//清空购物车
			clearCart() {
				let _this = this
				this.$api.clearCart({
					shopId: this.shopId
				}).then((res) => {
					if (res.data.code == 200) {
						this.getProductList()
						setTimeout(function() {
							_this.cartActive = false
							_this.popUpFlag = false
						}, 150);
					}
					console.log("=====" + JSON.stringify(JSON.stringify(res)))
			
				})
			
			},
			open(cartActive) {
				if (!cartActive) {
					uni.showToast({
						title: '购物车还没有任何东西！',
						duration: 1500,
						icon: "none"
					});
					return
				}
				this.popUpFlag = !this.popUpFlag
				if(this.popUpFlag){
					this.pupUpList()
				}
			
			},
			closeMask(){
				this.popUpFlag=false
				
			},
			//获取购物车列表
			pupUpList() {
				this.$api.getCartList({
					shopId: this.shopId
				}).then((res) => {
					if(res.data.data.length>0){
						this.popUpList = res.data.data[0].data
						console.log("=====" + JSON.stringify(this.popUpList))
					}else{
						this.popUpList=[]
						this.popUpFlag=false
						
					}
	
			
				})
			},
			payOrder(parameter,type) {
				parameter.type=type
				this.$api.payOrder(parameter).then((res) => {
					this.price = 0
					if(type==1){ //余额支付
						if (res.data.code == 200) {
							uni.showToast({
								title: '支付成功',
								duration: 1000,
								icon: "none"
							});
							setTimeout(function() {
								uni.navigateTo({
									url: '../pay/pay-state'
								});
							}, 1200);	
							this.close1()
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon: "none"
							});
							setTimeout(function() {
								uni.navigateTo({
									url: '../pay/pay',
									success: res => {},
									fail: () => {},
									complete: () => {}
								});
									
							}, 1000);
						}
					}else if(type==2){
						uni.requestPayment({
							provider: "wxpay",
							orderInfo: res.data.data,
							success:(res)=> {
								uni.showToast({
									title: "支付成功",
									duration: 2500,
								});
								this.close1()
								setTimeout(function() {
									uni.navigateTo({
										url: '../pay/pay-state'
									});
								}, 1700);
						
							},
							fail(e) {
								console.log(e)
								uni.showToast({
									title: "支付失败",
									duration: 2000,
									icon: 'none',
								});
								// plus.nativeUI.alert(JSON.stringify(e), function() {
						
								// }, "提示", "关闭")
						
							}
						})
					}
			
			
				})
			
			},
			//订单提交
			affirmOrder(cartActive, shopId) {
				let _this = this
				//判断当前提交按钮状态
				if (!cartActive) {
					uni.showToast({
						title: '您还没有添加任何商品！',
						duration: 1500,
						icon: "none"
					});
					return
				}
				
			
				// 获取是否有商品
				this.$api.getCartList({
					shopId: shopId
				}).then((res) => {
					if (res.statusCode == 200) {
						this.cartList = res.data.data
						console.log(JSON.stringify(this.cartList.data))
						if (this.cartList.length > 0) {
							let parameter = {
								ids: [],
								isDispatching: this.shopInfo.isDispatching,
							}
							for (var i = 0; i < this.cartList[0].data.length; i++) {
								parameter.ids.push(this.cartList[0].data[i].goodsId)
			
							}
							if (this.shopInfo.isDispatching == 1) {
								uni.navigateTo({
									url: '../order/address-order?shopId=' + shopId
								});
							} else {
								this.open1()

							}
			
			
			
						} else {
							uni.showToast({
								title: '您还没有添加任何商品！',
								duration: 1500,
								icon: "none"
							});
						}
					}
				})
			
			},
			payment1(){
				let type=1
				if(this.current===0){
					type=1
				}
				if(this.current===1){
					type=2
				}
				let parameter = {
					ids: [],
					isDispatching: this.shopInfo.isDispatching,
				}
				for (var i = 0; i < this.cartList[0].data.length; i++) {
					parameter.ids.push(this.cartList[0].data[i].goodsId)
							
				}
				this.$api.subOrder(parameter).then((res) => {
					// uni.hideLoading()
					if (res.data.code == 200) {
						//订单提交成功 开始支付
						const parameter = {
							"orderNo": res.data.data.orderNumber
						}
						this.payOrder(parameter,type)
					}
				})
			},
			//购物车添加
			 async addSubtractProduct(status, product, index) { //goodsId
				 await this.$api.addSubtractProduct({
					goodsId: product.goodsId,
					status: status
				}).then((res) => {
					if (res.data.success) {
						this.getProductList()
						this.calculateNumberById(product.goodsId,status)
						//刷新购物车
						this.pupUpList()
						
					}else{
						if(res.data.code !=20001 || res.data.code != 20002){
							uni.showToast({
								title: res.data.message,
								duration: 1000,
								icon: "none"
							});
						}
						// uni.showToast({
						// 	title: res.data.msg,
						// 	duration: 1000,
						// 	icon: "none"
						// });	
					}
			
				})
			
			},
			//根据id增加数量
			calculateNumberById(goodsId,number){
				for (var i = 0; i < this.list.length; i++) {
					for (var j = 0; j < this.list[i].data.length; j++) {
						if(this.list[i].data[j].goodsId==goodsId){
							this.list[i].data[j].number+=number
							if(this.list[i].data[j].number<0){
								this.list[i].data[j].number=0
							}
						}
					}
				}
				
			},
			//购物车价格数量计算
			calculateCart(){
				for (var i = 0; i < this.cartList.length; i++) {
					this.cartList[i]
				}
			},
			//列表价格数量计算
			calculate(){
				let totalPrice = 0
				let totalNumber = 0
				for (var i = 0; i < this.list.length; i++) {
					for (var j = 0; j < this.list[i].data.length; j++) {
						totalPrice+= this.list[i].data[j].price*this.list[i].data[j].number
						totalNumber+= this.list[i].data[j].number
					}
				}
				this.totalPrice = totalPrice
				this.totalNumber = totalNumber
				if(this.totalNumber>0){
					this.cartActive = true
				}else{
					this.cartActive = false
				}
				console.log("总价格："+totalPrice)
				console.log("总数量："+totalNumber)
			},
			
			//获取商家信息
			getShopInfo() {
				this.$api.getShopInfo({
					shopId: this.shopId,
					classifyId: this.classifyId
					// shopId: 4
				}).then((res) => {
					if (res.statusCode == 200) {
						console.log(res.data)
						this.shopInfo = res.data.data
						// if (this.shopList.length > 0) {
						// 	this.shopInfo = res.data.data.list[0]
						// 	console.log(this.shopInfo)

						// }
						uni.hideLoading()
					}
				})


			},

			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().select('#scroll-panel');
					view.boundingClientRect(res => {
						this.scrollTopSize = res.top;
						this.scrollHeight = res.height-80;
						this.$nextTick(() => {
							resolve();
						})
					}).exec();
				});
			},
			/* 获取列表数据 */
			getListData() {
				// Promise 为 ES6 新增的API ，有疑问的请自行学习该方法的使用。
				this.$nextTick(() => {
					this.getElementTop();
				});
			},
			/* 获取元素顶部信息 */
			getElementTop() {
				new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().selectAll('.main-item');
					view.boundingClientRect(data => {
						resolve(data);
					}).exec();
				}).then((res) => {
					let topArr = res.map((item) => {
						return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
					});
					this.topArr = topArr;

					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
					let last = res[res.length - 1].height;
					if (last - 0 < this.scrollHeight) {
						this.fillHeight = this.scrollHeight - last + 0;
					}
				});
			},
			/* 主区域滚动监听 */
			mainScroll(e) {
				let top = e.detail.scrollTop;
				let index = 0;
				/* 查找当前滚动距离 */
				for (let i = (this.topArr.length - 1); i >= 0; i--) {
					/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
					if ((top + 2) >= this.topArr[i]) {
						index = i;
						break;
					}
				}
				this.leftIndex = (index < 0 ? 0 : index);
			},
			/* 左侧导航点击 */
			leftTap(e) {
				let index = e.currentTarget.dataset.index;
				this.scrollInto = `item-${index}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.payment{
		width: 670rpx;
		height: 88rpx;
		background: #FF5551;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 100rpx;
	}
	.pop-name>text:nth-child(1){
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 13rpx;
	}
	.pop-name>text:nth-child(2){
		font-size: 32rpx;
		font-weight: 500;
		color: #999999;
		line-height: 120rpx;
	}
	.uni-lab>view:nth-child(1){
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.uni-lab{
		width: 690rpx;
		height: 100rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.pop_images2{
		width: 52rpx;
		height: 52rpx;
	}
	.pop-c{
		text-align: center;
		margin-bottom: 60rpx;
	}
	.pop-c>text:nth-child(1){
		font-size: 40rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-c>text:nth-child(2){
		font-size: 80rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-t{
		display: flex;
		align-items: center;
		text-align: center;
		margin-top: 40rpx;
	}
	.pop-t>view{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 210rpx;
	}
	.pop_images1{
		width: 48rpx;
		height: 48rpx;
		margin-left: 40rpx;
	}
	.popup {
		width: 750rpx;
		height: 785rpx;
		background: #FFFFFF;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		overflow: hidden;
		position: relative;
		z-index: 999;
	}
	.bottom-list3 {
		background-color: #FF5551;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border: solid 2rpx #FF5551;
	}
	
	.bottom-list3 text {
		font-size: 30rpx;
	}
	.cpt-mask {  
	        position: fixed;  
	        top: 0;  
	        left: 0;  
	        width: 100%;  
	        height: 100%;  
	        background-color: #000000;  
	        opacity: 0.5;  
	        z-index: 99;  
	    }
	.operation text {
		text-align: center;
	
	}
	
	.operation text:nth-child(2) {
		font-size: 30rpx;
		line-height: 70rpx;
	}
	
	.operation text:first-child {
		width: 60rpx;
		color: #FF5551;
		font-size: 40rpx;
	
	}
	
	.operation text:last-child {
		width: 60rpx;
		color: #FF5551;
		font-size: 40rpx;
	
	}
	
	.product-name text:first-child {
		font-size: 30rpx;
		font-weight: 600;
	
	}
	
	.product-name text:last-child {
		color: #FF5551;
	}
	
	.product-name {
		margin-left: 20rpx;
		padding: 5rpx 0rpx;
	}
	.product-logo image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 15rpx;
	}
	.product-list {
		padding: 0rpx 25rpx;
		margin-bottom: 15rpx;
	}
	.clear-cart {
		font-size: 22rpx;
		color: #999999;
	}
	
	.clear-cart text {
		padding: 0 5rpx;
	}
	.popo {
		position: fixed;
		width: 100%;
		background-color: rgba(255, 255, 255, 1);
		bottom: 132rpx;
		z-index: 101;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
	}
	
	.bottom {
		position: fixed;
		bottom: 30rpx;
		width: 690rpx;
		height: 100rpx;
		background-color: #463636;
		border-radius: 54rpx;
		margin-left: 30rpx;
		color: #ffffff;
	}
	
	.mini-price {
		font-size: 24rpx;
		color: #999999;
	}
	.bottom-list2 {
		padding-left: 38rpx;
	}
	
	.bottom-list2 text:last-child {
		font-size: 20rpx;
	}
	
	.bottom-list2 text:first-child {
		font-size: 31rpx;
	}
	.bottom-list1 text {
		position: absolute;
		left: 120rpx;
		top: -10rpx;
		border-radius: 50rpx;
		background-color: #FF5551;
		font-size: 20rpx;
		width: 36rpx;
		height: 36rpx;
		text-align: center;
		line-height: 36rpx;
	}
	
	.bottom-list1 image {
		width: 100rpx;
		height: 80rpx;
		margin-top: 10rpx;
		margin-left: 30rpx;
	}
	.bottom2 {
		height: 140rpx;
		background-color: rgba(255, 255, 255, 1);
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		z-index: 102; 
	}
	
	.class-title {
		font-weight: 600;
	}

	.peopel-num {
		position: absolute;
		right: 20rpx;
		line-height: 50rpx;
		&>text{
			width: 40rpx;
			text-align: center;
			color: #FF5551;
			font-size: 40rpx;
		}
		text:nth-child(2){
			color: #000;
			font-size: 32rpx;
		}
	}

	.price {
		color: #FF5551;
	}

	.iconqianjin {
		position: absolute;
		right: 20rpx;
		color: #838383;
		font-size: 24rpx;
		bottom: 18rpx;
	}

	.icon {
		color: #FF5551;
		margin-left: 26rpx;
	}

	.desc {
		margin-left: 14rpx;
		font-size: 26rpx !important;
		color: #000000 !important;
	}

	.link {
		margin: 0 auto;
		width: 300px;
		height: 2rpx;
		margin-top: 14rpx;
		background: #ebebeb;
	}

	.phone {
		border-radius: calc(50rpx);
		width: 74rpx;
		background: #FF5551;
		font-size: 40rpx;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		right: 30rpx;
		top: 30rpx;

	}

	.shop-title {
		font-size: 38rpx;
		font-weight: 600;
		margin-top: 40rpx;
		margin-left: 30rpx;
		color: #505050;

	}

	.shop-logo {
		border: #EEEEEE 1rpx solid;
		width: 140rpx;
		height: 140rpx;
		margin-left: 40rpx;
		margin-top: -40rpx;
		border-radius: 10rpx;


	}

	.attract {
		width: 700rpx;
		height: 80rpx;
		background-color: #463636;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;

	}

	.attract text {
		color: #FF7E51;

	}

	.attract text:last-child {
		padding: 0rpx 20rpx;
		border: #FF7E51 solid 2rpx;
		border-radius: 50rpx;
	}

	.card {
		width: 700rpx;
		height: 240rpx;
		background-color: #ffffff;
		z-index: 99;
		margin-top: 40rpx;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
		border-bottom-left-radius: 15rpx;
		position: relative;
	}

	.red-background {
		height: 150rpx;
		width: 100%;
		background-color: #FF5551;
		position: absolute;
	}

	.cart-2 {
		width: 200rpx;
		background-color: #D5B373;
		text-align: center;
		height: 100%;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;

		&>text {
			font-size: 42rpx;
			color: #fff;
		}
	}



	page,
	.container {
		height: 100%;
	}

	/* 容器 */
	.container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&>view {
			width: 100%;
		}

		.scroll-panel {
			flex-grow: 1;
			height: 0;
			overflow: hidden;
		}


	}

	.bottom-panel {
		background-image: linear-gradient(to right, #E6E6E6, #f0f0f0, #FFFFFF, #FFFFFF, #FFFFFF);
		// height: 100rpx;
		z-index: 99;
	}

	.cart {
		width: 700rpx;
		background-color: rgba(42, 45, 50, 1);
		height: 110rpx;
		border-radius: 110rpx;
		z-index: 99;

	}

	.show {
		display: none;
	}

	.list-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		font-size: 28rpx;

		.left {
			width: 180rpx;
			background-color: #e6e6e6;
			line-height: 80rpx;
			box-sizing: border-box;
			font-size: 32rpx;

			.item {
				text-align: center;
				position: relative;
				padding: 20rpx 0;

				&:not(:first-child) {
					margin-top: 1px;

					&::after {
						content: '';
						display: block;
						height: 0;
						width: 600upx;
						position: absolute;
						top: -1px;
						right: 0;
						transform: scaleY(0.5);
						/* 1px像素 */
					}
				}

				&.active {
					color: #FF5551;
					background-color: #fff;
					border-left: #FF5551 solid 4rpx;
					font-weight: 600;
				}
			}

			.fill-last {
				height: 0;
				width: 100%;
				background: none;
			}
		}

		.main {
			background-color: #fff;
			padding-left: 20rpx;
			width: 0;
			flex-grow: 1;
			box-sizing: border-box;



			.title-class {
				line-height: 64rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #666;
				background-color: #fff;
				position: sticky;
				top: 0;
				z-index: 19;
			}

			.item {
				padding-bottom: 10rpx;
				border-bottom: #eee solid 1px;
			}

			.goods {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				margin-bottom: 30rpx;


				&>image {
					width: 130rpx;
					height: 130rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

			}
		}
	}

	.number {
		width: 50rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.icon-jian1 {
		color: #000000;
		font-size: 40rpx;

	}

	.icon-jia1 {
		color: #D5B373;
		font-size: 38rpx;
	}

	.placeholder {
		height: 60rpx;
	}

	.class-title-view {
		top: 0rpx;
		line-height: 60rpx;
		font-size: 32rpx;
		font-weight: 600;
		position: sticky;
		height: 60rpx;
		background-color: #FFFFFF;
		width: 100%;
		z-index: 10;
	}

	.money text:first-child {
		font-size: 24rpx;
		color: #999999;

	}

	.money text:nth-child(2) {
		font-size: 36rpx;
		color: #3b3b3b;

	}

	.money text:nth-child(3) {
		font-size: 22rpx;
		color: #999999;

	}

	.desc {
		color: #999999;
		font-size: 22rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: 600;
	}
	.title1 {
		padding: 10px 25rpx;
	}

	.text-heide-1 {
		width: 300rpx;
	}

	.product-image image {
		width: 220rpx;
		height: 160rpx;
		border-radius: 15rpx;

	}

	.border-radis {
		/* 
		border-top-right-radius: 15rpx;
		border-bottom-right-radius: 15rpx; */
	}

	.classify {
		text-align: center;
	}



	.noAcitve {
		background-color: #e6e6e6;
		border-radius: 40rpx;
	}

	.noAcitve-between-top {}

	.noAcitve-between-buttom {
		border-top-right-radius: 20rpx;
	}

	.slide,
	.slide swiper {
		height: 300rpx;
		width: 750rpx;
		background-color: #e6e6e6;
	}


	.cart-view {
		height: 50px;
	}

	.content {
		height: 100%;
		background-color: #e6e6e6;
	}

</style>
